<template>
   <div class="cart">
      <nar-bar  class="heater">
         <div  slot="center">购物车({{length}})</div>
      </nar-bar>
     <scroll ref="scroll" class="content" >
        <cart-list></cart-list>
     </scroll>
     <car-button-bar class="buttonbar" :all-price="allPrice" :to-price="toPrice"></car-button-bar>

   </div>
</template>
<script>
  import Scroll from "../../components/common/scroll/Scroll";
  import NarBar from "components/common/navbar/NavBar"
  import CartList from "./childCart/CartList";
  import CarButtonBar from "./childCart/CarButtonBar";
  import Tosast from "components/content/Tost/Toast"
  import {mapGetters} from "vuex"
  export default {
    name:'Cart',
    components:{
      NarBar,
      CartList,
      Scroll,
      CarButtonBar,
      Tosast
    },
    computed:{
      ...mapGetters({
        length:"cartCount",
      }),
      allPrice(){
       // debugger
         return  parseFloat(this.$store.state.productlist.filter(item=>{
           return item.checked
         }).reduce((preValue,item)=>{
           return preValue+item.price.substring(1)*item.count
         },0)).toFixed(2)
      },
      toPrice(){
         return this.$store.state.productlist.filter(item=>{
            return  item.checked;
         }).length
      }
      },
    activated() {
      this.$refs.scroll.refresh();
    }
  }
</script>

<style scoped>
.heater{
  width: 100%;
  background-color: var(--color-tint);
  mso-font-width:40px;
  color: white;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
}
.cart{
  /*使用postion来设置滚动 父类用vh为单位 因为是可视高度 如果是 百分比 就是0 父类没有高度 然后通过 定位减去导航栏高度*/
  position: relative;
  height: 100vh;
}
.content{
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 93px;
  overflow: hidden;
}
.buttonbar{
   position: absolute;
  right: 0;
  left: 0;
  bottom: 49px;
}
</style>
